<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/public.css">
    <style media="screen">
      ul{
        overflow: hidden;
        border-bottom: 6px solid #f60;
        padding-left: 20px;
      }
      ul li{
        width: 100px;
        height: 30px;
        float: left;
        margin-right: 1px;
      }
      ul li span{
        display: block;
        background: #f1f1f1;
        text-align: center;
        line-height: 30px;
      }
      ul li b{
        display: none;
        background: #f60;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
      ul li:hover span{
        display: none;
      }
      ul li:hover b{
        display: block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span>home1</span>
        <b>首页1</b>
      </li>
      <li>
        <span>home1</span>
        <b>首页1</b>
      </li>
      <li>
        <span>home1</span>
        <b>首页1</b>
      </li>
      <li>
        <span>home1</span>
        <b>首页1</b>
      </li>
    </ul>
  </body>
</html>
